<template>
  <div id="details">
    <div class="details_header">
      <module-header :head_index="nav_details_index"/>
    </div>
    <div class="details_vertical_space"></div>
    <div class="details_path_nav">
      商品详情页面&nbsp;&nbsp;&nbsp;&nbsp;/
      &nbsp;&nbsp;&nbsp;&nbsp;{{details_Info.c_name}}
      &nbsp;&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;&nbsp;{{details_Info.cs_sort}}</div>
    <div class="details_context">
      <div class="details_context_main">
        <div class="details_context_main_left" style="border: 1px solid black">
          <img :src="require('@/assets/img/basketball/' + details_Info.cs_img)" class="details_context_main_left_img">
        </div>
        <div class="details_context_main_right">
          <h1 class="color-cyan">[{{details_Info.c_name}}]{{details_Info.cs_sort}}</h1>
          <h4 class="color-orange"><i class="el-icon-caret-right"></i>{{details_Info.c_detail}}</h4>
          <el-divider content-position="left">商品价格</el-divider>
          <el-row :gutter="1">
            <el-col :span="24">
              <el-card shadow="always">
                <div style="text-decoration: line-through;" class="color-gray">原价：{{details_Info.cs_price}}&nbsp;元/颗</div>
                <div class="color-red font-bold ">现价：{{details_Info.cs_price}}&nbsp;元/颗[优惠价]</div>
              </el-card>
            </el-col>
          </el-row>
          <el-divider content-position="left">颜色分类</el-divider>
          <div >
            <el-row :gutter="20">
              <el-col :span="4" v-for="(val, item) in color_classify" :key="item" >
                <img :src="require('@/assets/img/basketball/' + val.cs_img)" style="height: 55px;border: 1px solid black" @click="changePage(val)" >
              </el-col>
            </el-row>
          </div>
          <el-divider content-position="right">商品数量</el-divider>
          <div class="flex-layout justify-between">
            <span>商品数量：{{details_Info.cs_rep}}件</span>
            <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="选择商品数量" size="mini"></el-input-number>
          </div>

          <div class="flex-layout justify-between mar-top-20">
            <el-button type="success" plain @click="buyProject">确定购买</el-button>
            <el-button type="primary" plain @click="addCart">加入购物车</el-button>
          </div>
        </div>
      </div>
      <div class="details_context_Info">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="商品规格" name="first">
            <el-descriptions title="商品信息">
              <el-descriptions-item label="商品名称">{{details_Info.c_name}}-{{details_Info.cs_sort}}</el-descriptions-item>
              <el-descriptions-item label="品牌">{{details_Info.c_name}}</el-descriptions-item>
              <el-descriptions-item label="特点">{{details_Info.c_detail}}</el-descriptions-item>
              <el-descriptions-item label="分类编号">{{details_Info.c_no}}</el-descriptions-item>
              <el-descriptions-item label="产品编号">{{details_Info.cs_no}}</el-descriptions-item>
<!--              <el-descriptions-item label="备注">-->
<!--                <el-tag size="small">学校</el-tag>-->
<!--              </el-descriptions-item>-->
              <el-descriptions-item label="是否手工">是</el-descriptions-item>
              <el-descriptions-item label="商品地址">福建省泉州市丰泽区北峰街道</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="商品服务" name="second">
            <el-divider content-position="left">卖家承诺</el-divider>
            <div class="width-per-100 text-left flex-layout justify-start" >
              <el-link v-for="(val,item) in details_serve" :key="item" disabled class="pad-15">
                <i class="el-icon-circle-check "></i>{{val}}
                <span class="pad-left-5"></span>
              </el-link>
            </div>
            <el-divider content-position="left">价格说明</el-divider>
            <div class="text-left">
              <h5 class="text-left pad-10 color-red">划线价格</h5>
              <div class="indent-2">指商品的专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾经展示过的销售价等，并非原价，仅供参考。</div>
              <h5 class="text-left pad-10 color-red">未划线价格</h5>
              <div class="indent-2">指商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动，或会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。</div>
              <div class="indent-2">商家详情页（含主图）以图片或文字形式标注的一口价、促销价、优惠价等价格可能是在使用优惠券、满减或特定优惠活动和时段等情形下的价格，具体请以结算页面的标价、优惠条件或活动规则为准。</div>
              <h5 class="text-left pad-10 color-red">异常问题</h5>
              <div class="indent-2">商品促销信息以商品详情页 “促销” 栏中信息为准，商品的具体售价以商品计算页价格为准；若您发现活动商品售价或促销信息出现异常，建议购买前先联系销售商咨询</div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="用户评价" name="third" class="text-left pad-15">暂时没有评论</el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <side-bar></side-bar>
  </div>
</template>

<script>
import sideBar from '../components/Common/SideBar'
import moduleHeader from '../components/Common/Header'
export default {
  name: 'Details',
  components: {
    moduleHeader,
    sideBar
  },
  data () {
    return {
      nav_details_index: 5, // 设置导航栏中商品详情的索引
      num: 1, // 定义商品的数量
      activeName: 'first', // 管理分页商品的信息
      details_serve: [
        '7天无理由退货',
        '15天内包换货',
        '一年内支持以旧换新',
        '退还货运费险'
      ],
      details_Info: [], // 存储浏览的信息
      color_classify: [] // 存储颜色的分类
    }
  },
  methods: {
    // 商品计数器函数
    handleChange (value) {
      console.log(value, this.num)
    },
    // 分页栏的函数
    handleClick (tab, event) {
      console.log(tab, event)
    },
    // 更改正在查看的商品信息
    changePage (abj) {
      this.$store.state.vuex_user_see_comm_Info = abj
      if (this.$store.state.vuex_user_see_comm_Info === abj) {
        console.log('地址一样')
        this.$router.push('/details')
      }
    },
    // 立即购买
    buyProject () {
      console.log('立即购买')
      this.$axios.get('/orders/insertOrder', {
        params: {
          a_address: this.$store.state.vuex_user_address_Info[0].a_address,
          a_id: this.$store.state.vuex_user_address_Info[0].a_id,
          a_phone: this.$store.state.vuex_user_address_Info[0].a_phone,
          a_user: this.$store.state.vuex_user_address_Info[0].a_user,
          u_id: this.$store.state.vuex_user_Info
        }
      }).then(resp => {
        console.log(resp)
      }).catch(err => {
        console.log(err)
      })
    },
    // 添加购物车
    addCart () {
      console.log('点击购物车')
      this.$axios.get('/cart/insertCart', {
        params: {
          CCount: this.num,
          CName: this.$store.state.vuex_user_see_comm_Info.c_name,
          CImg: this.$store.state.vuex_user_see_comm_Info.cs_img,
          CPrice: this.$store.state.vuex_user_see_comm_Info.cs_price,
          CSort: this.$store.state.vuex_user_see_comm_Info.cs_sort,
          CTotalPrice: (this.$store.state.vuex_user_see_comm_Info.cs_price * this.num),
          UId: this.$store.state.vuex_user_Info.u_id,
          csNo: this.$store.state.vuex_user_see_comm_Info.cs_no,
          cs_no: this.$store.state.vuex_user_see_comm_Info.cs_no
        }
      }).then(resp => {
        console.log('状态码', resp.data)
        if (resp.data === 1) {
          this.$message({
            message: '商品添加成功',
            type: 'success'
          })
        }
      }).catch(err => {
        console.log(err)
      })
    }

  },
  mounted () {
    // 获取数据
    this.details_Info = this.$store.state.vuex_user_see_comm_Info
    // 答应数据
    console.log(this.details_Info)
    if (this.details_Info.c_no === 'C202207180001') {
      this.color_classify = this.$store.state.vuex_veidoorn
    } else if (this.details_Info.c_no === 'C202207180002') {
      this.color_classify = this.$store.state.vuex_wilson
    } else if (this.details_Info.c_no === 'C202207190001') {
      this.color_classify = this.$store.state.vuex_Spalding
    } else if (this.details_Info.c_no === 'C202207260001') {
      this.color_classify = this.$store.state.vuex_molten
    } else if (this.details_Info.c_no === 'C202207260002') {
      this.color_classify = this.$store.state.vuex_lining
    }
  }
}
</script>

<style lang="less" scoped>
#details {
  width: 100%;
  height: 100%;
  .details_header{
    width: 100%;
    height: 95px;
    border-bottom: 1px solid gainsboro;
    background: white;
    position: fixed;
  }
  .details_vertical_space{
    height: 96px;
    background: white;
    width: 100%;
  }
  .details_path_nav {
    width: 100%;
    height: 35px;
    border-bottom: 1px solid gainsboro;
    box-sizing: border-box;
    padding: 0 17.5%;
    text-align: left;
    line-height: 35px;
  }
  .details_context{
    width: 60%;
    /*background: red;*/
    /*height: 100px;*/
    margin:0 auto ;
    margin-top: 20px;
    .details_context_main{
      width: 100%;
      height: 500px;
      /*background: yellow;*/
      display: flex;
      justify-content: space-between;
      .details_context_main_left{
        width: 50%;
        height: 100%;
        background: #9c26b0;
        .details_context_main_left_img{
          width: 100%;
          height: 100%;
        }
      }
      .details_context_main_right{
        box-sizing: border-box;
        width: 50%;
        padding: 10px 40px;
        text-align: left;
      }
    }
    .details_context_Info{
      width: 100%;
      /*height: 35px;*/
      /*background: red;*/
      margin-top: 10px;
      /*border-top: 1px solid gainsboro;*/
      /*border-bottom: 1px solid gainsboro;*/
    }
  }
}
</style>
